import CommonDrawer from '@/components/CommonDrawer';
import ImageViewer from '@/components/ImageViewer';
import { Descriptions } from 'antd';
import styles from './index.less';

const Detail = (props) => {
  const { open, record, onCancel } = props;

  // 费用类型映射
  const getTypeLabel = (type) => {
    const typeMap = {
      0: '路桥费',
      1: '装卸车费',
      2: '充电费',
      3: '交警罚款',
      4: '轮胎费',
      5: '维修费',
    };
    return typeMap[type] || '-';
  };

  const items = [
    {
      key: 'day',
      label: '日期',
      children: record?.day || '-',
    },
    {
      key: 'groupName',
      label: '组织',
      children: record?.groupName || '-',
    },
    {
      key: 'license',
      label: '车牌号',
      children: record?.license || '-',
    },
    {
      key: 'realname',
      label: '驾驶员',
      children: record?.realname || '-',
    },
    {
      key: 'phone',
      label: '电话',
      children: record?.phone || '-',
    },
    {
      key: 'type',
      label: '费用类型',
      children: getTypeLabel(record?.type),
    },
    {
      key: 'price',
      label: '费用（元）',
      children: record?.price ?? '-',
    },
    {
      key: 'msgs',
      label: '报销描述',
      children: record?.msgs || '-',
    },
    {
      key: 'account',
      label: '付款帐号',
      children: record?.account || '-',
    },
    {
      key: 'time',
      label: '系统时间',
      children: record?.time || '-',
    },
    {
      key: 'remark',
      label: '备注',
      children: record?.remark || '-',
    },
  ];

  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width="100%"
      destroyOnHidden
      footer={null}
    >
      <div className={styles.container}>
        <div className={styles.left}>
          <h3>付款凭证</h3>
          <ImageViewer urls={[record?.transferLogs]} />
          <h3>报销凭证</h3>
          <ImageViewer urls={[record?.images]} />
        </div>
        <div className={styles.right}>
          <h3>报销单信息</h3>
          <Descriptions
            items={items}
            column={2}
            bordered
            size="middle"
            labelStyle={{
              fontWeight: 'bold',
              width: '160px',
              textAlign: 'right',
            }}
            contentStyle={{
              minHeight: '32px',
              padding: '8px 12px',
            }}
          />
        </div>
      </div>
    </CommonDrawer>
  );
};

export default Detail;
